<template>
    <div class="container">
      <br><br>
      <el-button type="primary" @click="handlerAdd">添加用户</el-button>
      <div class="user-table">
            <el-table :data="customerList" style="width: 100%">
            <el-table-column prop="customId" label="id" width="40" />
            <el-table-column prop="name" label="姓名" width="80" />
            <el-table-column prop="sex" label="性别" width="80"/>
            <el-table-column prop="phone" label="电话" width="130" />
            <el-table-column prop="identityCardNumber" label="身份证" width="180" />
            <el-table-column prop="roomId" label="房间id" width="80" />
            <el-table-column prop="checkInTime" label="入住时间" width="140" />
            <el-table-column prop="departureTime" label="离开时间" width="140" />
            <el-table-column prop="state" label="状态" width="80" />
            <el-table-column  label="操作">
                 <template #default="scope">
                    <el-button size="small" @click="handlerEdit(scope.row)">
                        编辑
                    </el-button>
                    <!-- <el-button size="small" type="danger" @click="deleteCustomer(scope.row.customId)" >
                        删除
                    </el-button> -->
                 </template>
            </el-table-column>
          </el-table>
      </div>
       
  
      <!--用户编辑表格-->
      <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="500"
          >
          
  
           <el-form
              ref="ruleFormRef"
              style="max-width: 600px"
              :model="user"
              label-width="auto"
              class="demo-ruleForm"
              :size="formSize"
              status-icon>
              <el-form-item label="id" prop="cno">
                <el-input v-model="customer.cno" />
              </el-form-item>
              <el-form-item label="姓名" prop="cname">
                <el-input v-model="customer.cname" />
              </el-form-item>
              <el-form-item label="性别" prop="csex">
              <el-radio-group v-model="customer.csex">
                <el-radio value="男">男</el-radio>
                <el-radio value="女">女</el-radio>
              </el-radio-group>
            </el-form-item>
              <el-form-item label="手机" prop="cphone">
                <el-input v-model="customer.cphone" />
              </el-form-item>
              <el-form-item label="身份证" prop="cidentity">
                <el-input v-model="customer.cidentity" />
              </el-form-item>
              <el-form-item label="房间号" prop="rid">
                <el-input v-model="customer.rid" />
              </el-form-item>
              <el-form-item label="入住时间" prop="checkin">
                <el-input v-model="customer.checkin" />
              </el-form-item>
              <el-form-item label="离开时间" prop="departure">
                <el-input v-model="customer.departure" />
              </el-form-item>
              <el-form-item label="状态" prop="state">
                <el-input v-model="customer.state" />
              </el-form-item>
          </el-form>
  
  
  
            <template #footer>
              <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="saveUser">
                   确定
                </el-button>
              </div>
            </template>
      </el-dialog>
    </div>
  </template>
  
  
  <script setup>
  import { onMounted,ref } from "vue";
  import { ElMessage,ElMessageBox } from 'element-plus'
  
      const dialogTitle = ref('编辑用户')
  
      //用户编辑页面是否显示
      const dialogVisible = ref(false)
  
      //操作类型  add：添加； update:修改
      const optionType = ref('')
  
      const customer = ref(
          {
            cno: "",
            cname: "",
            csex: "",
            cphone: "",
            cidentity: "",
            rid: "",
            checkin:"",
            departure:"",
            state:"",
            isdelete:""
        },
      )
  
      const customerList = ref([]);
  
      //保存用户数据
      const saveUser = () =>{
           let url =""
           let methodName = '' ;
           if(optionType.value == 'add'){
              url ="http://localhost:8282/resident/add?name="+customer.value.cname+
                                                      "&sex="+customer.value.csex+
                                                      "&phone="+customer.value.cphone+
                                                      "&roomId="+customer.value.rid+
                                                      "&checkInTime="+customer.value.checkin+
                                                      "&departureTime="+customer.value.departure+
                                                      "&state="+customer.value.state+
                                                      "&identityCardNumber="+customer.value.cidentity
              methodName = 'get' ;
           }else if(optionType.value == 'edit'){
               url ="http://localhost:8282/resident/update?customId="+customer.value.cno+"&state="+customer.value.state ;
               methodName = 'get' ;
               mode: 'cors'
           }
           console.log(url)
           fetch(url,{
                method:methodName,
                headers:{
                   "Authorization":localStorage.getItem("token")
               }
          })
               .then( res => res.json())
               .then( res => {
                   ElMessage({
                    message: '用户信息修改成功',
                    type: 'success',
                  })
                   dialogVisible.value = false ;
               })
      }
  
      //删除用户
  
      const deleteCustomer = customId =>{
  
           ElMessageBox.confirm(
            '用户删除后不能恢复，是否确认删除?',
            '删除用户',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
               //单击了确认删除按钮
               handlerDel(customId)
            })
            .catch(() => {
              ElMessage({
                type: 'info',
                message: '取消了操作',
              })
            })
  
      }
      
      const handlerDel = customId =>{
           fetch("http://localhost:8282/resident/delete?"+customId,{
                method:"delete",
                headers:{
                   "Authorization":localStorage.getItem("token")
               }        
          })
               .then( res => res.json())
               .then( res => {
                   ElMessage({
                    message: '用户信息删除成功',
                    type: 'success',
                  })
                   selectAllCustomers();
               })
      }
  
      //编辑用户
      const handlerEdit = row =>{
          customer.value = row
          optionType.value = 'edit'
          dialogTitle.value = '编辑用户'
          dialogVisible.value = true
      }
  
      //查询所有用户
      const selectAllCustomers = () =>{
          fetch("http://localhost:8282/resident/findAll",{
              method: 'GET',
              mode: 'cors',
              headers:{
                   "Authorization":localStorage.getItem("token")
               }
          })
               .then( res => res.json())
               .then( res => {
                customerList.value = res.data
                console.log(customerList.value)
                console.log(res.message)
                console.log(res.code)
              })
      }
  
      //添加用户
      const handlerAdd = () =>{
          customer.value = {}
          optionType.value = 'add'
          dialogTitle.value = '添加住户'
          dialogVisible.value = true ;
      }
  
      //查询数据的函数
      onMounted(() => {
         selectAllCustomers();
      })
  </script>
  <style scoped>
      .container{
        text-align: center;
      }
      
      table{
          border-collapse: collapse;
          border: 1px solid rgb(8, 8, 8);
          display: inline-block;
      }
  
      .user-table{
         width: 80%;
         margin: 0 auto;
      }
  
  </style>
  